<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<uni-fab :content="fab_content" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		<view class="container-box" v-if="now_news && now_news.title">
			<view class="title">
				{{now_news.title}}
			</view>
			<view class="text-box">
				<view class="address" @tap="goUrl" data-url="/pages/village_menu/index">{{village_name}}</view>
				<view class="time">{{now_news.add_time}}</view>
			</view>
			<view class="content-box">
				<rich-text :nodes="now_news.content" :loading="loading" /></rich-text>
			</view>
			<view class="read-box">
				<view class="read-num">阅读{{now_news.read_sum}}</view>
				<!-- <view class="reader">❀在看76</view> -->
			</view>
		</view>
		<view class="comment">
			<view class="Selected-commernt">留言列表</view>
			<view class="write-commernt" @click="writecomment">写留言</view>
		</view>

		<view class="container1">
			<view class="comment-box" v-if="now_news && now_news.news_reply_list[0]" v-for="(item,index) in now_news.news_reply_list"
			 :key="index">
				<view class="comment-icon">
					<image :src="item.avatar" class="comment-img"></image>
				</view>
				<view class="comment-info">
					<view class="comment-name">
						<text>{{item.nickname}}</text>
					</view>
					<view class="comment-text">{{item.content}}
					</view>
				</view>
			</view>
		</view>
		<!-- 评论弹层 -->
		<view>
			<uni-popup ref="popup" type="top">
				<textarea v-model="notedata" value="" :placeholder="popup_placeholder" :focus="popup_focus" class="prpup-box" />
				<button form-type="submit" @click="formSubmit" class="btn">发送</button>
			</uni-popup>
		</view>
		<villageChooseHouse v-if="choose_options.need_choose_house" :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
	</view>
</template>

<script>
	import uniPopup from "../../../appComponent/uni/uni-popup/uni-popup.vue"
	import uniFab from '../component/uni-fab/uni-fab.vue';
	import villageChooseHouse from '../../../appComponent/villagePage/villageChooseHouse';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	
	const getVillageNews = (news_id) => {
		// 获取公告消息
		if (!news_id) {
			news_id = _this.news_id;
		}
		common.post('HouseApi&a=village_news', {
			village_id: _this.village_id,
			news_id: news_id,
			page: _this.pageIndex
		}, data => {
			console.log('data', data);
			if (data.now_news) {
				_this.now_news = data.now_news;
			}
			
			// #ifdef H5
				_this.setWxShare()
			// #endif
		});
	}
	export default {
		data() {
			return {
				// items: ['小区公告', '小区新闻', '小区动态','小区活动'],
				items: [],
				current: 0,
				user_options: {},
				news_id: 0,
				now_news: {},
				village_name: '',
				village_logo:'',
				village_id: 0,
				pageIndex: 1,
				look: false,
				popup_focus: false,
				notedata:'',
				popup_placeholder: '说说你的看法',
				choose_options:{},
				fab_content: [],
				fab_pattern:{},
				config: '',
				mobile_head_color: '',
				tabbar: {},
				loading:false//开启loading不显示默认值
			}
		},
		onShow() {
			// #ifdef H5
			_this.setWxShare()
			// #endif
		},
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this, function(config) {
				_this.fab_pattern = {
					buttonColor: app.globalData.config.config.mobile_head_color
				}
				if (app.globalData.tabBar && app.globalData.tabBar.list) {
					_this.fab_content = app.globalData.tabBar.list;
				}
			});
			console.log('options', options);
			if (options && options.news_id) {
				_this.news_id = options.news_id
			}
			
			const res = uni.getStorageSync("village_key")
			if(res){
				_this.village_name = res.village_name;
				_this.pigcms_id = res.pigcms_id
				_this.village_id = res.village_id;
				_this.village_logo = res.village_logo;
			}
			if(options.village_id && options.village_id != _this.village_id){
				common.post('HouseApi&a=search_village', {
					village_id: options.village_id
				}, data => {
					_this.village_name = data.village_name;
					_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
					_this.village_id = options.village_id;
					
					var res = {
						village_id: _this.village_id,
						village_name: _this.village_name,
						village_logo: _this.village_logo
					};
					if(options.pigcms_id){
						res.pigcms_id = options.pigcms_id;
						_this.pigcms_id = options.pigcms_id;
					}
					uni.setStorageSync('village_key', res);

					getVillageNews();
				});
				
				return false;
			}
			getVillageNews();
		},
		methods: {
			onShareAppMessage: function () {
				return {
					title:  "【" + _this.village_name + "】" + _this.now_news.title,
					desc: "快来看，" + _this.village_name + "发布了这项重要通知",
					path: '/pages/village/index/villagecontent?news_id=' + _this.now_news.news_id + '&village_id=' + _this.village_id
				};
			},
			setWxShare() {
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/village/index/villagecontent?news_id=${_this.now_news.news_id}&village_id=${_this.village_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: "【" + _this.village_name + "】" + _this.now_news.title,
					desc: "快来看，" + _this.village_name + "发布了这项重要通知",
					sendFriendLink: shareWxLink,
					share_img: _this.village_logo
				}
				console.log('shareData', shareData);
				common.setWxShare(shareData)
			},
			writecomment(){
				if(!app.globalData.is_login){
					//调用应用实例的方法获取全局数据
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请先登录'),
						showCancel: false,
						confirmText: common.changeTxt('去登录'),
						success: function(res) {
							_this.user_options = {
								toLogin: true
							}
						}
					})
					_this.popup_placeholder = '说说你的看法';
					_this.$refs.popup.close();
					_this.popup_focus = false;
				}else{
					if(!_this.pigcms_id){
						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							// after_event: 'reply',
						}
					}else{
						_this.popup_placeholder = '说说你的看法';
						_this.showArticleReplyFunc();
					}
				}
			},
			// 评论发送
			formSubmit(index) {
				var aricle_id = _this.aricleid;
				console.log(aricle_id)
				var formdata = _this.notedata;
				if (!formdata) {
					uni.showToast({
						title: `请填写评论`,
						icon: 'none'
					});
					return
				}
				console.log(formdata);
				common.post('HouseApi&a=add_new', {
					village_id: _this.village_id,
					news_id: _this.news_id,
					pigcms_id: _this.pigcms_id,
					content: formdata,
				}, data => {
					console.log("++++++++++++++++++",data)
					console.log(data)
					if (data) {
						var news_reply_list = _this.now_news.news_reply_list;
						var comment = data
						news_reply_list.push(comment);
						_this.now_news.news_reply_list = news_reply_list;
						getVillageNews()
					}
				});
				this.notedata = '';
				this.$refs.popup.close()
				_this.popup_focus = false;
			},
			showArticleReplyFunc:function(){
				_this.notedata = '';
				_this.popup_focus = false;
				_this.popup_placeholder = '说说你的看法';
				_this.$refs.popup.open();
				setTimeout(function(){
					_this.popup_focus = true;
				},500);
			},
			goUrl: function(e) {
				console.log(e);
				if (e.type == 'submit') {
					common.upFormid(e);
				}
				if (e.currentTarget.dataset.goodsid) {
					goodsReport(e.currentTarget.dataset.goodsid);
				}
				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title;
				var url = e.currentTarget.dataset.url;
				if (!pageTitle) {
					pageTitle = '';
				}
				if (nums) {
					common.post(
						'Login&a=house_adver_click', {
							adver_id: nums
						},
						function(e) {
							common.parseUrl(url, '', false, pageTitle);
						}
					);
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			},
			chooseHouseId(param){
				_this.pigcms_id = param.pigcms_id;
			},
			trigger(param) {
				var url = param.item.pagePath;
				if (_this.village_id) {
					url = common.changeURLArg(url, 'village_id', _this.village_id);
				}
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
				console.log('tabbar url', url);
				common.parseUrl(url, '', false, param.item.text);
			}
		},
		components: {
			uniPopup,
			villageChooseHouse,
			uniFab
		},
	}
</script>

<style>
	.container {
		padding: 0px 0px 0px 0px;
		margin: 0px;
		background-color: #F5F5F5;
		/* overflow: hidden; */
		width: 100%;
		height: 100%;
	}
	.container-box {
		background-color: #FFFFFF;
	}

	.title {
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		padding: 20rpx 20rpx 0;
	}

	.text-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 30rpx;
	}

	.time {
		font-size: 24rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.address {
		font-size: 24rpx;
		color: #007AFF;
		margin-left: 30rpx;

	}

	.content-box {
		margin-top: 24rpx;
		/* text-indent: 50rpx; */
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 24rpx;
	}

	.read-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.read-num {
		font-size: 24rpx;
		color: #999999;
		margin: 30rpx;
	}

	.reader {
		font-size: 24rpx;
		color: #007AFF;
		margin: 30rpx;
	}

	.comment {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #F5F5F5;
	}

	.Selected-commernt {
		font-size: 24rpx;
		color: #555555;
		margin: 30rpx;
	}

	.write-commernt {
		font-size: 24rpx;
		color: #007AFF;
		margin: 30rpx;
	}

	.comment-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 23rpx;
	}

	.comment-icon {
		width: 52rpx;
		height: 52rpx;
		flex-shrink: 0;
	}

	.comment-img {
		width: 100%;
		height: 100%;
		margin-left: 24rpx;
		border-radius: 100%;
	}

	.comment-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.comment-name {
		font-size: 24rpx;
		color: #999999;
		margin-left: 30rpx;
		margin-top:12rpx;
	}

	.comment-text {
		padding-top: 10rpx;
		display: flex;
		text-align:justify;
		font-size: 24rpx;
		color: #333333;
		margin-left: 30rpx;
		margin-right: 30rpx;
		flex-wrap: wrap;
	}
	.prpup-box {
		width: 100%;
		height: 200rpx;
	}
	.btn {
		float: right;
		height: 65rpx;
		background-color: #007AFF;
		line-height: 65rpx;
		color: #FFFFFF;
	}
	.container1 {
		margin-bottom: 30rpx;
		padding-bottom: 140rpx;
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}
</style>
